﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >

            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="申请单位：">
                        {{entityObj.storeName}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="申请人：">
                        {{entityObj.createName}}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="申请时间：">
                        {{entityObj.createTime}}
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="退换货清单">
                        <el-button type="primary" size="small" @click="addMaterial()">新增物料</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="">
                        <el-table :data="entityObj.afterOrderItems" border style="width: 100%" show-summary :summary-method="summaryFun">
                            <el-table-column label="物料编码" width="100">
                                    <template #default="scope">{{scope.row.materialCode}}</template>
                            </el-table-column>
                            <el-table-column label="物料名称" width="180">
                                <template #default="scope">{{scope.row.materialName}}</template>
                            </el-table-column>
                            <el-table-column label="分类" width="70">
                                <template #default="scope">{{scope.row.materialTypeName}}</template>
                            </el-table-column>
                            <el-table-column label="单位" width="70">
                                <template #default="scope">{{scope.row.unitName}}</template>
                            </el-table-column>
                            <el-table-column label="单价" width="70">
                                <template #default="scope">{{scope.row.price}}</template>
                            </el-table-column>
                            <el-table-column label="规格" width="120">
                                <template #default="scope">{{scope.row.materialSpecs}}</template>
                            </el-table-column>
                            <el-table-column label="供应商" width="200">
                                <template #default="scope">{{scope.row.supplierName}}</template>
                            </el-table-column>
                            <el-table-column label="破损处理" width="130">
                                <template #default="scope">
                                    <el-select placeholder="处理方式" v-model="scope.row.afterOrderType" style="width: 100px">
                                        <el-option label="补发" :value="0"/>
                                        <el-option label="退货" :value="1"/>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="申请数量" width="130" >
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.qty"
                                        style="width: 100%"
                                        :step="1"
                                        :max="scope.row.maxQty"
                                        :min="1"
                                        controls-position="right"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="应退金额" width="100" >
                                <template #default="scope">
                                    <span v-if="scope.row.afterOrderType==0">--</span>
                                    <span v-if="scope.row.afterOrderType==1">{{scope.row.qty * scope.row.price}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="破损照片" width="150" >
                                <template #default="scope">
                                        <sc-upload-multiple 
                                            v-model="scope.row.images"
                                            :objName="'Supply/AfterOrder'" 
                                            :uploadType="'OSS'" 
                                            :bucketName="'jtmc'" 
                                            :limit="1"
                                           
                                             />
                                </template>
                            </el-table-column>
                            <el-table-column label="备注" width="150" >
                                <template #default="scope">
                                    <el-input v-model="scope.row.remarks" style="width: 100%" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button
                                        type="danger"
                                        size="small"
                                        @click="deleteRow(scope.$index, scope.row)"
                                    >移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="备注">
                        <el-input v-model="entityObj.remarks" type="textarea" :rows="2" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button
                v-if="mode != 'show'"
                type="primary"
                :loading="isSaveing"
                @click="submit()"
            >保 存</el-button>
        </template>
        <template>
            <el-dialog
                v-model="materialState"
                title="选择收货订单物料"
                :width="1300"
                :center="true"
                append-to-body
                style="height: 480px"
            >
                <el-row>
                    <sc-task-order-item-choice
                        ref="scTaskOrderItemChoice"
                        :queryType="'task-order/item-pages'"
                        :storeId="this.entityObj.storeId"
                    ></sc-task-order-item-choice>
                </el-row>
                <template #footer>
                    <el-button @click="materialState = false">取 消</el-button>
                    <el-button type="primary" :loading="isSaveing" @click="setTaskOrderItemChoice">确定</el-button>
                </template>
            </el-dialog>
        </template>

       


    </full-screen-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            titleMap: {
                Add: "补发/退货申请",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {
                remarks:"",
                affterOrderItems:[]
            },
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {
                
            },
            //物料状态
            materialState: false,
            
            
          
        };
    },
   
    watch: {
            'entityObj.afterOrderItems':{
                handler(newvalue, oldVal) {
                    let returnFee = 0;
                    if(newvalue)
                    {
                        newvalue.map((p) => {
                            returnFee += p.afterOrderType==1?p.price * p.qty:0;
                        });
                        this.entityObj.totalReturnFee=returnFee;
                    }
                },
                deep: true
            }
	},
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        addMaterial() {
            this.materialState = true;
        },
        setTaskOrderItemChoice() {
            this.entityObj.afterOrderItems= this.$refs.scTaskOrderItemChoice.selectionRows;
            this.materialState = false;
        },
        deleteRow(index) {
            this.entityObj.afterOrderItems.splice(index, 1);
        },
        summaryFun(val)
        {
            const { columns, row } = val;
            const sums = [];

            columns.forEach((item, index) => {
                if (index === 0) {
                    sums[index] = '总计：'+this.entityObj.totalReturnFee;
                    return;
                }
            });
            return sums;
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    const data={ ...this.entityObj}
                    console.log("data",data)
                    try {
                        var returnValue =await this.$API.auth.PostProcessApi.post(
                                this.mode == "Add"? "after-order/create": "after-order/update",data);
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                        }
                    } catch (error) {
                        this.loading = false;
                        return false;
                    }
                }
            });
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = {...data}; 
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["StoreType","PaymentType","InvoicingType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsStoreType = returnValue.response.find(
                        (p) => p.code == "StoreType"
                    ).optionsDetails;
                    this.optionsPaymentType = returnValue.response.find(
                        (p) => p.code == "PaymentType"
                    ).optionsDetails;
                    this.optionsInvoicingType = returnValue.response.find(
                        (p) => p.code == "InvoicingType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/dic-options",
                    { ParentBaseDictionaryCodes: ["001"] }
                );
                if (returnValue.status == 200) {
                    this.optionsBrand = returnValue.response.find(
                        (p) => p.code == "001"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "system-area/tree",
                    {}
                );
                if (returnValue.status == 200) {
                    this.areaTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "purchase-dept/tree",
                    {}
                );
                if (returnValue.status == 200) {
                    this.purchaseDept = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        await this.initOptions();

        this.entityObj.createName = tool.data.get("USER_INFO").Name;
        this.entityObj.storeId = tool.data.get("USER_INFO").OrgId;
        this.entityObj.storeName = tool.data.get("USER_INFO").OrgName;
        this.entityObj.createTime = tool.formatDate(new Date());
    },
};
</script>

<style scoped>

/deep/ .el-upload--picture-card{
    width: 50px;
    height: 50px;
}
/deep/ .el-upload{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
</style>
